<template>
  <el-dialog v-el-drag-dialog v-if="visible" :title="form.title" :visible.sync="visible" :append-to-body="appendToBody" :before-close="onClose">
    <el-card class="m-b-10">
      <el-row>
        <tinymce-editor v-if="form.type === '2'" ref="tinymce" :plugins="[]" :toolbar="[]" :menubar="false" :disabled="true" :height="350" @close="onClose" />
        <el-input v-else v-model="form.content" type="textarea" readonly :rows="3" />
      </el-row>
      <el-row class="m-t-20" :gutter="20">
        <el-col :span="1.5">
          <label>截止时间</label>
        </el-col>
        <el-col :span="1.5">
          <el-date-picker
            v-model="form.endTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            readonly
          />
        </el-col>
        <el-col :span="1.5" class="fr">
          <el-button v-if="hasLoaded" type="primary" icon="el-icon-check" @click="onSubmit">已 读</el-button>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>

<script>
import { messageLoad } from '@/api/tool/message'

export default {
  name: 'MessageContentDialog',
  data() {
    return {
      visible: false,
      appendToBody: false,
      hasLoaded: false,
      form: {
        id: undefined,
        type: '2',
        title: undefined,
        content: '',
        endTime: ''
      }
    }
  },
  methods: {
    init(messageId) {
      this.hasLoaded = false
      this.form.id = messageId || null
      this.visible = true
      this.$nextTick(() => {
        this.loadForm(messageId)
      })
    },
    loadForm(id) {
      messageLoad({ 'id': id }).then(response => {
        this.$api.objectUpdate(this.form, response.param)
        if (this.form.type === '2') {
          // 加载tinymce插件
          this.$refs.tinymce.update(this.form.content)
        }
        this.hasLoaded = true
      })
    },
    onSubmit() {
      this.$emit('confirmForm', this.form.id)
      this.onClose()
    },
    beforeClose() {
      if (this.form.type === '2') {
        this.$refs.tinymce.clear()
      }
      this.form = {
        id: undefined,
        type: '2',
        title: undefined,
        content: '',
        endTime: ''
      }
      this.readOnly = false
    },
    onClose() {
      if (this.form.type === '2') {
        this.$refs.tinymce.clear()
      }
      this.form = {
        id: undefined,
        type: '2',
        title: undefined,
        content: '',
        endTime: ''
      }
      this.visible = false
    }
  }
}
</script>
